<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PC端项目艾编程商城</title>
    <meta name="description" content="PC端项目艾编程商城">
    <meta name="keywords" content="PC端项目艾编程商城">

    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <!-- 先引入字体，因为可能在全局样式中重置字体颜色 -->
    <link rel="stylesheet" href="./css/global.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./fonts/iconfont.js"></script>
    
    <style>
        .chat{
            width: 82px;
            min-height: 300px;
            /* background-color: #fff; */
            position: fixed;
            top: 317px;
            right: 0;
            z-index: 999;
            /* transform: translateY(-50%); */
        }
        .chat ul{
            
        }
        .chat ul li{
            height: 85px;
            border: 1px solid #F5F5F5;
            margin-bottom: 1px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1;
            cursor: pointer;
            position: relative;
            background-color: #fff;
        }
        .chat ul li:hover{
            color: #FF6A00;
        }
        .chat ul li:hover .iconfont{
            color: #FF6A00;
        }
        .chat ul li span.iconfont{
            font-size: 25px;
            color: #484848;
            margin-bottom: 14px;
            /* border: 1px solid #484848; */
        }
        .chat ul li .child{
            width: 180px;
            height: 200px;
            border: 1px solid #ebebeb;
            background-color: #fff;
            position: absolute;
            right: 82px;
            top: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            display: none;
        }
        .chat ul li .child img{
            width: 110px;
            height: 110px;
            display: block;
        }
        .chat ul li .child >p.title{
            padding: 17px 0 14px 0;
            font-size: 16px;
            color: #484848;
            font-weight: 600;
        }
        .chat ul li .child >p.text{
            margin-top: 13px;
            color:#FF6A00;
        }
        .chat ul li:hover .child{
            display: flex;
        }
        .chat .backtop{
            height: 85px;
            background-color: #DDDDDD;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1;
            margin-top: 20px;
            cursor: pointer;
        }
        .chat .backtop span.iconfont{
            font-size: 24px;
            color: #484848;
            margin-bottom: 15px;
            font-weight: 400;
            /* border: 1px solid #484848; */
        }
        .chat .backtop >p{
            font-size: 14px;
            color: #484848;
            font-weight: 400;
        }
        .chat .backtop:hover p{
            color: #FF6A00;
        }
        .chat .backtop:hover span.iconfont{
            color: #FF6A00;
        }
    </style>

</head>
<body>
    <!-- header start -->
    <header>
        <!-- site-topbar start -->
        <div class="site-topbar">
            <div class="container topbar-flex">
                <!-- topbar-nav start -->
                <nav class="topbar-nav">
                    <ul>
                        <li> <a href="#">手机商城</a></li>
                        <li> <a href="#">MINI</a></li>
                        <li> <a href="#">IoT</a></li>
                        <li class="submenu"> 
                            <a href="#">云服务</a>
                            <div class="submenu-list">
                                <ul>
                                    <li><a href="#"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shoujizhuti_08tongxunlu"></use>
                                    </svg>通信录</a></li>
                                    <li><a href="#"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shoujizhuti_05duanxin"></use>
                                    </svg>短信</a></li>
                                    <li><a href="#"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shoujizhuti_03xiangce"></use>
                                    </svg>云相册</a></li>
                                    <li><a href="#"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shoujizhuti_25xiazai"></use>
                                    </svg>手机云盘</a></li>
                                    <li><a href="#"><svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-shoujizhuti_15bianqian"></use>
                                    </svg>笔记(便签)</a></li>
                                </ul>
                            </div>

                        </li>
                        <li> <a href="#">手机数科</a></li>
                        <li> <a href="#">升品</a></li>
                        <li> <a href="#">智能开发平台</a></li>
                        <li> <a href="#">企业团购</a></li>
                        <li> <a href="#">资质证照</a></li>
                        <li> <a href="#">协议规则</a></li>
                        <li class="submenu"> 
                            <a href="#">下载app</a>
                            <div class="download-app">
                                <img src="./image/download-app.png" alt="">
                                <p>手机商城APP</p>
                            </div>
                        </li>
                        <li> <a href="#">智能生活</a></li>
                        <li> <a href="#">Melect Nocation</a></li>
                    </ul>
                </nav>
                <!-- topbar-nav end -->
                <!-- top-wrap start --> 
                <div class="top-wrap">
                    <div class="topbar-info">
                        <a href="#">登录</a>
                        <a href="#">注册</a>
                        <a href="#">消息通知</a>
                    </div>
                    <div class="topbar-cart">
                        <a href="#"><span class="iconfont icon-gouwuche1"></span>购物车</a>
                        <div class="cart-menu">购物车中还没有商品，赶紧选购吧！</div>
                    </div>

                </div>
                <!-- top-wrap end -->
            </div>
        </div>
        <!-- site-topbar end -->

    </header>
    <!-- header end -->
    <!-- site-header start -->
    <div class="site-header ">
        <div class="header-container container">
            <!-- header-logo start -->
            <div class="header-logo">
                <h1>艾编程商城</h1>
                <a href="#"><img src="./image/header-logo.png" alt="艾编程logo" width="48px" height="56px"></a>
            </div>
            <!-- end header-logo -->
            <!-- header-nav start -->
            <div class="header-nav">
                <ul>
                    <li><a href="#">Minini手机</a></li>
                    <li><a href="#">Pidmi手机</a></li>
                    <li><a href="#">电视</a></li>
                    <li><a href="#">笔记本</a></li>
                    <li><a href="#">平板</a></li>
                    <li><a href="#">家电</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">服务中心</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
            <!-- end header-nav -->
            <!-- header-search start -->
            <div class="header-search">
                <form action="">
                    <div class="search">
                        <input type="text" placeholder="电风扇" class="search-text">
                        <button type="submit" name="search-btn" class="search-btn iconfont icon-fangdajing"></button>
                        <div class="keyword-list">
                            <ul>
                                <li><a href="https://www.mi.com/shop/search?keyword=%E6%89%8B%E6%9C%BA%E6%8D%A2%E6%96%B0">手机换新</a></li>
                                <li><a href="#">电风扇</a></li>
                                <li><a href="#">智能音箱</a></li>
                                <li><a href="#">智能电视</a></li>
                                <li><a href="#">智能冰箱</a></li>
                                <li><a href="#">智能洗衣机</a></li>
                            </ul>
                        </div>

                    </div>
                </form>
            </div>
            <!-- end header-search -->
        </div>
        

    </div>
    <!-- site-header end -->
    <!-- site-main start -->
    <main>
        <!-- page1 start -->
        <section class="page1 container">
            <!-- swiper start -->
            <div class="swiper swiper1" id="swiper1">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="./image/banner1.jpg" alt="" class="img-cover">
                    </div>
                    <div class="swiper-slide">
                        <img src="./image/banner2.jpg" alt="" class="img-cover">
                    </div>
                    <div class="swiper-slide">
                        <img src="./image/banner3.jpg" alt="" class="img-cover">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>
            <!-- swiper end -->

            <!-- category start -->
            <nav class="category">
                <ul>
                    <li><a href="#">手机</a>
                        <category-item>
                            <a href="#">
                                <img src="./image/ipone.png" alt="">
                                Miaomi 12S
                            </a>
                            <a href="#">
                                <img src="./image/ipone.png" alt="">
                                Miaomi 12S
                            </a>
                            <a href="#">
                                <img src="./image/ipone.png" alt="">
                                Miaomi 12S
                            </a>
                            <a href="#">
                                <img src="./image/ipone.png" alt="">
                                Miaomi 12S
                            </a>
                            <a href="#">
                                <img src="./image/ipone.png" alt="">
                                Miaomi 12S
                            </a>
                            <a href="#">
                                <img src="./image/ipone.png" alt="">
                                Miaomi 12S
                            </a>
                            <a href="#">
                                <img src="./image/ipone.png" alt="">
                                Miaomi 12S
                            </a>

                        </category-item>
                    </li>
                    <li><a href="#">电视</a>
                    <category-item>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>


                    </category-item>
                    </li>
                    <li><a href="#">笔记本 平板</a>
                    <category-item>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                    </category-item>

                    </li>
                    <li><a href="#">出行 穿戴</a>
                    
                    <category-item>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                    </category-item>
                    </li>
                    <li><a href="#">耳机 音响</a>
                    <category-item>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                    </category-item>
                    </li>
                    <li><a href="#">家电</a>
                    <category-item>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                    </category-item>
                    </li>
                    <li><a href="#">智能 路由器</a>
                    <category-item>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                    </category-item>
                    </li>
                    <li><a href="#">电源 配件</a>
                    <category-item>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                    </category-item>
                    </li>
                    <li><a href="#">健康 儿童</a>
                    <category-item>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                    </category-item>
                    </li>
                    <li><a href="#">生活 箱包</a>
                    <category-item>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                        <a href="#">
                            <img src="./image/ipone.png" alt="">
                            Miaomi 12S
                        </a>
                    </category-item>
                    </li>
                </ul>
            </nav>
            <!-- category end -->
        </section>
        <!-- page1 end -->
        <!-- page2 start -->
        <section class="page2">
            <div class="recommend-banner container">
                <a href="#">
                    <img src="./image/banner.png" alt="" class="img-cover">
                </a>
            </div>
            <!-- recommend-music start -->
            <div class="recommend-music container">
                <h2 class="music-title">歌 单 推 荐</h2>
                <div class="music-tabs">
                    <!-- 选项卡 -->
                    <ul class="tab-header" id="J_tab-header">
                        <li class="active">为你推荐</li>
                        <li>官方歌单</li>
                        <li>情歌</li>
                        <li>网络歌曲</li>
                        <li>经典KTV</li>
                        <li>热歌</li>
                    </ul>
                    <!-- 歌单内容列表 -->
                    <div class="tab-content">
                        <div class="tab-content-item active">
                            <ul class="music-list">
                                <li>
                                    <a href="#">
                                        <div class="img">
                                            <img src="./image/music1.png" alt="" class="img-cover">
                                            <span class="iconfont icon-play"></span>
                                        </div>
                                    </a>
                                    <p class="title ellipsis-single-line"><a href="#">拒绝不开心丨rap情歌甜到你发晕</a></p>
                                    <p class="play-count ellipsis-single-line"><a href="#">播放量：1253.9万</a></p>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img">
                                            <img src="./image/music2.png" alt="" class="img-cover">
                                            <span class="iconfont icon-play"></span>
                                        </div>
                                        <p class="title ellipsis-single-line"><a href="#">拒绝不开心丨rap情歌甜到你发晕</a></p>
                                        <p class="play-count ellipsis-single-line"><a href="#">播放量：1253.9万</a></p>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img">   
                                            <img src="./image/music3.png" alt="" class="img-cover">
                                            <span class="iconfont icon-play"></span>
                                        </div>
                                    </a>
                                    <p class="title ellipsis-single-line"><a href="#">拒绝不开心丨rap情歌甜到你发晕</a></p>
                                    <p class="play-count ellipsis-single-line"><a href="#">播放量：1253.9万</a></p>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img">
                                            <img src="./image/music4.png" alt="" class="img-cover">
                                            <span class="iconfont icon-play"></span>
                                        </div>
                                    </a>
                                    <p class="title ellipsis-single-line"><a href="#">拒绝不开心丨rap情歌甜到你发晕</a></p>
                                    <p class="play-count ellipsis-single-line"><a href="#">播放量：1253.9万</a></p>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="img">
                                            <img src="./image/music5.png" alt="" class="img-cover">
                                            <span class="iconfont icon-play"></span>
                                        </div>
                                    </a>
                                    <p class="title ellipsis-single-line"><a href="#">拒绝不开心丨rap情歌甜到你发晕</a></p>
                                    <p class="play-count ellipsis-single-line"><a href="#">播放量：1253.9万</a></p>
                                </li>

                            </ul>
                        </div>
                        <div class="tab-content-item">222</div>
                        <div class="tab-content-item">333</div>
                        <div class="tab-content-item">444</div>
                        <div class="tab-content-item">555</div>
                        <div class="tab-content-item">666</div>
                    </div>
                </div>
            </div>
            <!-- recommend-music end -->
        </section>
        <!-- page2 end -->
        <!-- page3 start -->
        <section class="page3 container">
            <div class="recomend-products">
                <div class="product-header">
                    <div class="title">
                        <h2>自在游乐 健康成长</h2>
                        <p>大人过大年，小朋友也有小乐趣。改造房间，给小朋友准备一个“游乐场”，无论是准备带着小朋友回家，还是就地过年，都可以享受 闲适的亲子时光。</p>
                    </div>
                    <a href="#" class="more-button">更多儿童产品</a> 
                </div>
                <div class="product-content">
                    <div class="product-item">
                        <img src="./image/product1.png" alt="" class="img-cover">
                        <div class="dot dot1">
                            <div class="dot-tips">
                                <p class="dot-title ellipsis-single-line">DUNDRA 敦德拉</p>
                                <p class="desc ellipsis-multi-line">带储物空间的活动桌</p>
                                <p class="price">¥<span>999</span>.00</p>
                            </div>
                        </div>
                        <div class="dot dot2">
                            <div class="dot-tips">
                                <p class="dot-title ellipsis-single-line">DUNDRA 敦德拉</p>
                                <p class="desc ellipsis-multi-line">带储物空间的活动桌</p>
                                <p class="price">¥<span>999</span>.00</p>
                            </div>
                        </div>
                        <div class="dot dot3">
                            <div class="dot-tips">
                                <p class="dot-title ellipsis-single-line">DUNDRA 敦德拉</p>
                                <p class="desc ellipsis-multi-line">带储物空间的活动桌</p>
                                <p class="price">¥<span>999</span>.00</p>
                            </div>
                        </div>
                    </div>
                    <div class="product-item">
                        <img src="./image/product2.png" alt="" class="img-cover">
                    </div>
                    <div class="product-item">
                        <img src="./image/product3.png" alt="" class="img-cover">
                    </div>
                    <div class="product-item">
                        <img src="./image/product4.png" alt="" class="img-cover">
                    </div>
                    <div class="product-item">
                        <img src="./image/product5.png" alt="" class="img-cover">
                    </div>
                </div>
            </div>
        </section>
        <!-- page3 end -->
        <!-- page4 start -->
        <section class="page4">
            <div class="recomend-video container">
                <h2 class="title">手机商城 - 精彩视频</h2>
                <div class="video-list">
                    <div class="video-item">
                        <div class="img-container" data-video-src="./video/video01.mp4">
                            <img src="./image/video1.png" alt="">
                            <span class="iconfont icon-play-circle"></span>
                        </div>
                        <p class="title ellipsis-single-line"><a href="#">巨族 18X</a></p>
                    </div>
                    <div class="video-item">
                        <div class="img-container" data-video-src="./video/video02.mp4">
                            <img src="./image/video2.png" alt="">
                            <span class="iconfont icon-play-circle"></span>
                        </div>
                        <p class="title ellipsis-single-line"><a href="#">巨族 18X</a></p>
                    </div>
                    <div class="video-item">
                        <div class="img-container" data-video-src="./video/video03.mp4">
                            <img src="./image/video3.png" alt="">
                            <span class="iconfont icon-play-circle"></span>
                        </div>
                        <p class="title ellipsis-single-line"><a href="#">巨族 18X</a></p>
                    </div>
                    <div class="video-item">
                        <div class="img-container">
                            <img src="./image/video4.png" alt="">
                            <span class="iconfont icon-play-circle"></span>
                        </div>
                        <p class="title ellipsis-single-line"><a href="#">巨族 18X</a></p>
                    </div>
                    <div class="video-item">
                        <div class="img-container">
                            <img src="./image/video5.png" alt="">
                            <span class="iconfont icon-play-circle"></span>
                        </div>
                        <p class="title ellipsis-single-line"><a href="#">巨族 18X</a></p>
                    </div>
                    <div class="video-item">
                        <div class="img-container">
                            <img src="./image/video6.png" alt="">
                            <span class="iconfont icon-play-circle"></span>
                        </div>
                        <p class="title ellipsis-single-line"><a href="#">巨族 18X</a></p>
                    </div>
                    <div class="video-item">
                        <div class="img-container">
                            <img src="./image/video7.png" alt="">
                            <span class="iconfont icon-play-circle"></span>
                        </div>
                        <p class="title ellipsis-single-line"><a href="#">巨族 18X</a></p>
                    </div>
                    <div class="video-item">
                        <div class="img-container">
                            <img src="./image/video8.png" alt="">
                            <span class="iconfont icon-play-circle"></span>
                        </div>
                        <p class="title ellipsis-single-line"><a href="#">巨族 18X</a></p>
                    </div>
                    <span class="col"></span>
                    <span class="col"></span>
                </div>
            </div>
        </section>
        <!-- page4 end -->
        <!-- 黑色半透明遮罩层 -->
        <div class="video-mask" id="J_video-mask">
            <div class="video-content">
                <video src="#" controls autoplay muted id="J_video"></video>
                <span class="clost-btn" id="J_close-btn"></span>
            </div>
        </div>
        <!-- page5 start -->
        <section class="page5">
            <div class="recommend-info container">
                <h2 class="title">手机商城 - 推荐信息</h2>
                <div class="recommend-content">
                    <div class="recommend-item">
                        <img src="./image/ipone1.png" alt="" class="img-cover">
                        <div class="recommed-text">
                            <span>产品</span>
                            <p class="title">MINI nova 9 Pro</p>
                            <span>精彩 由我摄定</span>
                            <p class="more">了解更多 <span class="iconfont icon-jiantouyou"></span></p>
                        </div>
                    </div>
                    <div class="recommend-item">
                        <img src="./image/ipone2.png" alt="" class="img-cover">
                        <div class="recommed-text">
                            <span>产品</span>
                            <p class="title">MINI nova 9 Pro</p>
                            <span>精彩 由我摄定</span>
                            <p class="more">了解更多 <span class="iconfont icon-jiantouyou"></span></p>
                        </div>
                    </div>
                    <div class="recommend-item">
                        <img src="./image/ipone3.png" alt="" class="img-cover">
                        <div class="recommed-text">
                            <span>产品</span>
                            <p class="title">MINI nova 9 Pro</p>
                            <span>精彩 由我摄定</span>
                            <p class="more">了解更多 <span class="iconfont icon-jiantouyou"></span></p>
                        </div>
                    </div>
                    <div class="recommend-item">
                        <img src="./image/ipone4.png" alt="" class="img-cover">
                        <div class="recommed-text">
                            <span>产品</span>
                            <p class="title">MINI nova 9 Pro</p>
                            <span>精彩 由我摄定</span>
                            <p class="more">了解更多 <span class="iconfont icon-jiantouyou"></span></p>
                        </div>
                    </div>
                    <div class="recommend-item">
                        <img src="./image/ipone5.png" alt="" class="img-cover">
                        <div class="recommed-text">
                            <span>产品</span>
                            <p class="title">MINI nova 9 Pro</p>
                            <span>精彩 由我摄定</span>
                            <p class="more">了解更多 <span class="iconfont icon-jiantouyou"></span></p>
                        </div>
                    </div>
                    <div class="recommend-item">
                        <img src="./image/ipone6.png" alt="" class="img-cover">
                        <div class="recommed-text">
                            <span>产品</span>
                            <p class="title">MINI nova 9 Pro</p>
                            <span>精彩 由我摄定</span>
                            <p class="more">了解更多 <span class="iconfont icon-jiantouyou"></span></p>
                        </div>
                    </div>

                </div>
            </div>
        </section>
        <!-- page5 end -->
        <!-- page6 start -->
        <section class="page6">
            <div class="item"></div>
            <div class="container">
                <div class="logo"><img src="./image/logo-3.png" alt=""></div>
                <div class="accordion">
                    <ul>
                        <li>
                            <img src="./image/pic1.png" alt="" class="img-cover">
                            <p>清心老师</p>
                        </li>
                        <li>
                            <img src="./image/pic2.png" alt="" class="img-cover">
                            <p>清心老师</p>
                        </li>
                        <li>
                            <img src="./image/pic3.png" alt="" class="img-cover">
                            <p>清心老师</p>
                        </li>
                        <li>
                            <img src="./image/pic4.png" alt="" class="img-cover">
                            <p>清心老师</p>
                        </li>
                        <li>
                            <img src="./image/pic5.png" alt="" class="img-cover">
                            <p>清心老师</p>
                        </li>
                        <li>
                            <img src="./image/pic6.png" alt="" class="img-cover">
                            <p>清心老师</p>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- page6 end -->
        <!-- page7 start -->
        <section class="page7">
            
            <!-- swiper2 -->
            <div class="swiper swiper2" id="swiper2">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><div class="item">
                        <div class="item-child"><img src="./image/1.png" alt="" class="img-cover"></div>
                        <div class="item-child"><img src="./image/2.png" alt="" class="img-cover"></div>
                        <div class="item-child"><img src="./image/3.png" alt="" class="img-cover"></div>
                        <div class="item-child"><img src="./image/4.png" alt="" class="img-cover"></div>
                        <div class="item-child"><img src="./image/5.png" alt="" class="img-cover"></div>
                        <div class="item-child"><img src="./image/6.png" alt="" class="img-cover"></div>
                        <div class="item-child">萌宠系列</div>
                    </div>
                </div>
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="item-child"><img src="./image/1.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/2.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/3.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/4.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/5.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/6.png" alt="" class="img-cover"></div>
                            <div class="item-child">萌宠系列</div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="item-child"><img src="./image/1.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/2.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/3.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/4.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/5.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/6.png" alt="" class="img-cover"></div>
                            <div class="item-child">萌宠系列</div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <div class="item">
                            <div class="item-child"><img src="./image/1.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/2.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/3.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/4.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/5.png" alt="" class="img-cover"></div>
                            <div class="item-child"><img src="./image/6.png" alt="" class="img-cover"></div>
                            <div class="item-child">萌宠系列</div>
                        </div>
                    </div>
                </div>
            
                <!-- 如果需要滚动条 -->
                <div class="swiper-scrollbar"></div>
            </div>
        </section>
        <!-- page7 end -->
    </main>
    <!-- site-main end -->

    <!-- footer start -->
    <footer class="footer">
        <!-- footer service start -->
        <div class="footer-service container">
            <div class="service-item"><a href="#"><span class="iconfont icon-banshou"></span>预约维修服务</a></div>
            <div class="service-item"><a href="#"><span class="iconfont icon-7tianwuliyoutuihuo"></span>7天无理由退货</a></div>
            <div class="service-item"><a href="#"><span class="iconfont icon-15tianwuliyoutuihuo"></span>15天免费换货</a></div>
            <div class="service-item"><a href="#"><span class="iconfont icon-liwu"></span>满69元包邮</a></div>
            <div class="service-item"><a href="#"><span class="iconfont icon-31dingwei"></span>1100余家售后网点</a></div>
        </div>
        <!-- footer service end -->
        <!-- footer menu start -->
        <div class="footer-info container">
            <div class="footer-menu">
                <dl></dl>
                <dl>
                    <dt>选购指南</dt>
                    <dd><a href="#">手机</a></dd>
                    <dd><a href="#">电视</a></dd>
                    <dd><a href="#">笔记本</a></dd>
                </dl>
                <dl>
                    <dt>服务中心</dt>
                    <dd><a href="#">申请售后</a></dd>
                    <dd><a href="#">售后政策</a></dd>
                    <dd><a href="#">维修服务价格</a></dd>
                </dl>
                <dl>
                    <dt>服务保障</dt>
                    <dd><a href="#">服务保障</a></dd>
                    <dd><a href="#">服务保障</a></dd>
                    <dd><a href="#">服务保障</a></dd>
                </dl>
                <dl>
                    <dt>服务保障</dt>
                    <dd><a href="#">服务保障</a></dd>
                    <dd><a href="#">服务保障</a></dd>
                    <dd><a href="#">服务保障</a></dd>
                </dl>
            </div>
            <div class="footer-tel">
                <p class="tel">400-123-4567</p>
                <p class="tips"><span>8:00-18:00</span>(仅收市话费)</p>
                <a href="#" class="kf"><span class="iconfont icon-duanxin"></span>人工客服</a>
            </div>
        </div>
        <!-- footer menu end -->
        <!-- copyright -->
        <div class="copyright">ICODINGEDU | Copyright © 2019-present Arry | 陕 ICP 备 2022004903</div>
        <!-- copyright end -->
    </footer>
    <!-- footer end -->

    <!-- chat start -->
        <div class="chat">
        <ul>
            <li>
                <span class="iconfont icon-weixin"></span>
                <p>项目开发</p>
                <div class="child">
                    <p class="title">前端基础课</p>
                    <img src="./image/7.png" alt="" class="img-cover">
                    <p class="text">手机商城APP</p>
                </div>
            </li>
            <li><span class="iconfont icon-qq"></span><p>项目开发</p></li>
            <li><span class="iconfont icon-kefu"></span><p>在线客服</p></li>
            <li><span class="iconfont icon-xiangyingshi"></span><p>响应式网站</p></li>
        </ul>
        <div class="backtop">
            <span class="iconfont icon-fanhuidingbu"></span>
            <p>返回顶部</p>
        </div>
        </div>
    <!-- chat end -->


    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/index.js"></script>
    <script>
        //获取返回顶部按钮
        const backtop = document.querySelector('.backtop');
        //监听浏览器滚动事件
        window.addEventListener('scroll',function(){
            //获取滚动的距离
            const y = window.scrollY;
            //判断滚动的距离是否大于等于1000
            if(y >= 700){
                //显示返回顶部按钮
                document.querySelector('.backtop').style.display = 'flex';
            }else{
                //隐藏返回顶部按钮
                document.querySelector('.backtop').style.display = 'none';
            }
        });


        backtop.addEventListener('click',function(){
            //滚动到顶部
            // window.scrollTo(0,0);
            window.scrollTo({
                top:0,
                behavior:'smooth'
            })
        });
    </script>
</body>
</html>